<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static "css/style.css"%}">
</head>
<body>
    <div class="content">
        <ul class="nav-list clearfix">

            <li id="add-platform">添加平台</li>
        </ul>
        <div class="info-box">

        </div>
    </div>
</body>
<script src="{% static "js/jquery-3.2.1.min.js"%}"></script>
<script>

var currentPlatform = "qingdian";

$.get("/pang5_web/platform_config/config_list/?page_num=1",function(data){
    for( var i=0; i<data.length; i++ ){
        var platform = data[i].platform;
        $("#add-platform").before('<li class="nav-item" platform="'+platform+'">'+platform+'</li>')
        var html = addPlatform(data[i]);
        $(".info-box").append(html);

    }
    changeTab(0)
})

$(".nav-list").on("click",".nav-item",function(){

    var index = $(this).index();
    changeTab(index)
})
function changeTab(index){
    $(".nav-item").eq(index).addClass("cur").siblings(".nav-item").removeClass("cur");
    $(".info-item").eq(index).addClass("cur").siblings(".info-item").removeClass("cur")
}


$("#add-platform").click(function(event) {
    $("#add-platform").before('<li class="nav-item">新平台</li>')
    $(".info-box").append(addPlatform());
    var len = $(".info-item").length;
    changeTab(len-1)
});

$(".info-box").on('click', '.submit-platform', function(event) {
    var id = $(this).parents(".info-item").attr("id")

    var platform = $(this).parents(".info-item").find(".platform").val();


    var has_cover_img = $(this).parents(".info-item").find(".has_cover_img")[0].checked?"1":"0";

    var cover_img_width_min = $(this).parents(".info-item").find(".cover_img_width_min").val();
    var cover_img_width_max = $(this).parents(".info-item").find(".cover_img_width_max").val();

    var cover_img_height_min = $(this).parents(".info-item").find(".cover_img_height_min").val();
    var cover_img_height_max = $(this).parents(".info-item").find(".cover_img_height_max").val();

    var cover_img_size_min = $(this).parents(".info-item").find(".cover_img_size_min").val();
    var cover_img_size_max = $(this).parents(".info-item").find(".cover_img_size_max").val();

    var chapter_img_width_min = $(this).parents(".info-item").find(".chapter_img_width_min").val();
    var chapter_img_width_max = $(this).parents(".info-item").find(".chapter_img_width_max").val();

    var chapter_img_height_min = $(this).parents(".info-item").find(".chapter_img_height_min").val();
    var chapter_img_height_max = $(this).parents(".info-item").find(".chapter_img_height_max").val();

    var chapter_img_size_min = $(this).parents(".info-item").find(".chapter_img_size_min").val();
    var chapter_img_size_max = $(this).parents(".info-item").find(".chapter_img_size_max").val();

    var platform_logo_addr = $(this).parents(".info-item").find(".platform_logo_addr").val();
    var support_login_types = $(this).parents(".info-item").find(".support_login_types").val();
    var third_id = $(this).parents(".info-item").find(".third_id").val();

    var $this = $(this)
    $.post("/pang5_web/platform_config/config_add_or_change/",{
        id:id,
        platform:platform,
        has_cover_img:has_cover_img,
        cover_img_width:cover_img_width_min+","+cover_img_width_max,
        cover_img_height:cover_img_height_min+","+cover_img_height_max,
        cover_img_size:cover_img_size_min+","+cover_img_size_max,
        chapter_img_1_width:chapter_img_width_min+","+chapter_img_width_max,
        chapter_img_1_height:chapter_img_height_min+","+chapter_img_height_max,
        chapter_img_1_size:chapter_img_size_min+","+chapter_img_size_max,
        chapter_img_2_height:"",
        chapter_img_2_size:"",
        chapter_img_2_width:"",
        third_id:third_id,
        platform_logo_addr:encodeURIComponent(platform_logo_addr),
        support_login_types:support_login_types
        // platform_en:""
    },function(data){
        alert(data.msg+",请刷新页面获取配置");

    })

});


$(".info-box").on('click', '.delete-platform', function(event) {
    var id = $(this).parents(".info-item").attr("id")
    $.get("/pang5_web/platform_config/config_delete/?id="+id,function(data){
        alert(data.msg+",请刷新页面获取配置");
    })
})

// $.get("http://10.10.6.25/pang5_web/platform_config/platform_config/",function(data){
//     console.log(data)
// })


function addPlatform(data){
    // console.log(data.cover_img_size)
    var data = data || {
        platform:"",
        has_cover_img:"",
        cover_img_width:"",
        cover_img_size:"",
        cover_img_height:"",
        chapter_img_1_width:"",
        chapter_img_1_height:"",
        chapter_img_1_size:"",
        id:0
    }
    var id = data.id || 0
    var platform = data.platform || "";

    var has_cover_img = data.has_cover_img;

    var third_id = data.third_id || 0;
    var cover_img_width_min = data.cover_img_width.split(",")[0] || "";
    var cover_img_width_max = data.cover_img_width.split(",")[1] || "";

    var cover_img_height_min = data.cover_img_height.split(",")[0] || "";
    var cover_img_height_max = data.cover_img_height.split(",")[1] || "";

    var cover_img_size_min = data.cover_img_size.split(",")[0] || "";
    var cover_img_size_max = data.cover_img_size.split(",")[1] || "";

    var chapter_img_width_min = data.chapter_img_1_width.split(",")[0] || "";
    var chapter_img_width_max = data.chapter_img_1_width.split(",")[1] || "";

    var chapter_img_height_min = data.chapter_img_1_height.split(",")[0] || "";
    var chapter_img_height_max = data.chapter_img_1_height.split(",")[1] || "";

    var chapter_img_size_min = data.chapter_img_1_size.split(",")[0] || "";
    var chapter_img_size_max = data.chapter_img_1_size.split(",")[1] || "";

    var support_login_types = data.support_login_types || "";
    var platform_logo_addr = data.platform_logo_addr || "";

    var html = "";

    console.log(chapter_img_width_min)
    html += '<div class="info-item" platform="'+platform+'" id="'+id+'">'
    html += '<div class="line clearfix">'
    html += '<span>平台名称：</span>'
    html += '<input type="text" placeholder="平台名称" class="platform" value="'+ platform +'">'
    html += '</div>'
    html += '<div class="line clearfix">'
    html += '<span>是否有封面：</span>'
    console.log(has_cover_img,":has_cover_img")
    if( has_cover_img == "1" ){
        html += '<input type="checkbox" class="has_cover_img" checked>'
    }else if( has_cover_img == "0" ){
        html += '<input type="checkbox" class="has_cover_img">'
    }

    html += '</div>'

    html += '<div class="line clearfix">'
    html += '<span>封面宽度：</span>'
    html += '<input type="text" placeholder="最小" class="cover_img_width_min" value="'+ cover_img_width_min +'">'
    html += '<input type="text" placeholder="最大" class="cover_img_width_max" value="' + cover_img_width_max + '"> px'
    html += '</div>'

    html += '<div class="line clearfix">'
    html += '<span>封面高度：</span>'
    html += '<input type="text" placeholder="最小" class="cover_img_height_min" value="'+cover_img_height_min+'">'
    html += '<input type="text" placeholder="最大" class="cover_img_height_max" value="'+cover_img_height_max+'"> px'
    html += '</div>'

    html += '<div class="line clearfix">'
    html += '<span>封面大小：</span>'
    html += '<input type="text" placeholder="最小" class="cover_img_size_min" value="'+cover_img_size_min+'">'
    html += '<input type="text" placeholder="最大" class="cover_img_size_max" value="'+cover_img_size_max+'"> kb'
    html += '</div>'

    html += '<div class="line clearfix">'
    html += '<span>是否需要作品id</span>'
    html += '<input type="text" placeholder="强制请填1" class="third_id" value="'+third_id+'">'
    html += '</div>'



    html += '<div class="line clearfix">'
    html += '<span>章节图片宽度：</span>'
    html += '<input type="text" placeholder="最小" class="chapter_img_width_min" value="'+ chapter_img_width_min +'">'
    html += '<input type="text" placeholder="最大" class="chapter_img_width_max" value="'+ chapter_img_width_max +'"> px'
    html += '</div>'

    html += '<div class="line clearfix">'
    html += '<span>章节图片高度：</span>'
    html += '<input type="text" placeholder="最小" class="chapter_img_height_min" value="'+ chapter_img_height_min +'">'
    html += '<input type="text" placeholder="最大" class="chapter_img_height_max" value="'+ chapter_img_height_max +'"> px'
    html += '</div>'

    html += '<div class="line clearfix">'
    html += '<span>章节图片大小：</span>'
    html += '<input type="text" placeholder="最小" class="chapter_img_size_min" value="'+ chapter_img_size_min +'">'
    html += '<input type="text" placeholder="最大" class="chapter_img_size_max" value="'+ chapter_img_size_max +'"> kb'
    html += '</div>'


    html += '<div class="line clearfix">'
    html += '<span>登录方式：</span>'
    html += '<input type="text" placeholder="英文逗号隔开" class="w support_login_types" value="'+ support_login_types +'">'
    html += '</div>'

    html += '<div class="line clearfix">'
    html += '<span>logo图片地址：</span>'
    html += '<input type="text" placeholder="" class="w platform_logo_addr" value="'+ decodeURIComponent(platform_logo_addr) +'">'
    html += '</div>'

    // html += '<!-- <div class="line clearfix">'
    // html += '<span>是否支持定时：</span>'
    // html += '<input type="checkbox" class="has_clock_publish">'
    // html += '</div> -->'

    html += '<div class="submit-platform">保存平台信息</div>'
    if( id!=0 ){
        html += '<div class="delete-platform">删除平台信息</div>'
    }

    html += '</div>'
    return html;
}


</script>
</html>
